<template>
  <div>
    <dv-decoration-1 v-if="decorationmodel === 1" :class="classname" />
    <dv-decoration-2 v-else-if="decorationmodel === 2" :class="classname" />
    <dv-decoration-3 v-else-if="decorationmodel === 3" :class="classname" />
    <dv-decoration-4 v-else-if="decorationmodel === 4" :class="classname" />
    <dv-decoration-5 v-else-if="decorationmodel === 5" :class="classname" />
    <dv-decoration-6 v-else-if="decorationmodel === 6" :class="classname" />
    <dv-decoration-7 v-else-if="decorationmodel === 7" :class="classname" />
    <dv-decoration-8 v-else-if="decorationmodel === 8" :class="classname" />
    <dv-decoration-9 v-else-if="decorationmodel === 9" :class="classname" />
    <dv-decoration-10 v-else-if="decorationmodel === 10" :class="classname" />
    <dv-decoration-11 v-else-if="decorationmodel === 11" :class="classname" />
    <dv-decoration-12 v-else-if="decorationmodel === 12" :class="classname" />
    <div v-else></div>
  </div>
</template>
<script>
export default {
  name: 'decorationitem',
  props: ['decorationmodel', 'classname'],
  data() {
    return { vheight: '250px' }
  }
}
</script>
<style scoped>
.d-flex .dv-decoration-1 {
  width: 100px;
  height: 25px;
  position: relative;
  top: -0.0375rem;
}
.d-flex .dv-decoration-2 {
  width: calc(100% - 80px);
  height: 25px;
  position: relative;
  top: -0.0375rem;
}
</style>
